import styled from '@emotion/styled';
import { Space, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

interface TableManagementProps {
	TableData: DataType[];
	serviceMonitoring: (roomId: string, sessionId: string, agentName: string, userData: any) => void;
	tableHeight: number;
}

interface DataType {
	key: string;
	agentName: string;
	checkInSkillGroup: string;
	belongSkillGroup: string;
	currentStatus: string;
	serviceNo: string;
	session: any;
	toGroup: any[];
	toScenarioId: any[];
	userData: any | string;
	_disabled: boolean;
	name: string;
}

const ServiceMonitoringSpan = styled.span`
	font-size: 13px;
	font-weight: 400;
	color: #3962a6;
	line-height: 18px;
	cursor: pointer;
`;

const EmptyTextSpan = styled.span`
	font-size: 13px;
	font-weight: 400;
	color: #979797;
	line-height: 18px;
`;

const TableManagement = (props: TableManagementProps) => {
	const { t } = useTranslation();
	const { TableData, serviceMonitoring } = props;

	useEffect(() => {}, []);

	const getAgentStatus = (status: string) => {
		switch (status) {
			case 'online':
				return t('checked-in');
			case 'ready':
				return t('ready-status');
			case 'notReady':
				return t('not-ready-status'); // 示忙
			case 'ringing':
				return t('ringing');
			case 'serving':
				return t('calling');
			case 'otherWork':
				return t('taking-break');
			case 'afterWork':
				return t('work-arrange');
			default:
				return status;
		}
	};

	const columns: ColumnsType<DataType> = [
		{
			title: t('index-number'),
			width: '100px',
			dataIndex: 'index',
			key: 'index',
			render: (value, record, index) => `${index + 1}`
		},
		{
			title: t('user-name'),
			dataIndex: 'name',
			key: 'name'
		},
		{
			title: t('full-name'),
			dataIndex: 'fullName',
			key: 'fullName'
		},
		{
			title: t('checked-in-skill-set'),
			dataIndex: 'checkInSkillGroup',
			key: 'checkInSkillGroup'
		},
		{
			title: t('skill-group'),
			dataIndex: 'belongSkillGroup',
			key: 'belongSkillGroup'
		},
		{
			title: t('agent-status'),
			width: '100px',
			key: 'currentStatus',
			dataIndex: 'currentStatus',
			render: (_, data: DataType) => (
				<Space size="middle">
					<span>{getAgentStatus(data.currentStatus)}</span>
				</Space>
			)
		},
		{
			title: t('operate'),
			key: 'action',
			width: '100px',
			render: (_, data: DataType) => (
				<Space size="middle">
					<ServiceMonitoringSpan onClick={() => serviceMonitoring(data.session.roomId, data.session.sessionId, data.name, data.userData)}>
						{data._disabled ? '' : t('service-monitor')}
					</ServiceMonitoringSpan>
				</Space>
			)
		}
	];

	const empty = {
		emptyText: <EmptyTextSpan>{t('no-match')}</EmptyTextSpan>
	};

	return <Table scroll={{ x: 100 + '%', y: 600 - 100 }} locale={empty} pagination={false} columns={columns} dataSource={TableData} />;
};

export default TableManagement;
